<template>
	<view class="content">
		<view class="card" v-if="!options.type">
			<text class="card-title">请选择举报原因(必填)</text>
			<view class="reason-box">
				<text class="reason" v-for="e,i in reasons" :key="i" @click="reasonIndex = i"
					:class="[reasonIndex == i ? 'reason-active' : '']">{{e.name}}</text>
			</view>
		</view>
		<view class="card" style="position: relative;">
			<textarea maxlength="500" :placeholder="options.type ? '请输入您的问题反馈内容描述' : '请描述您的举报理由具体的举报内容'" :auto-height="true"
				class="report-content" v-model="reportContent"></textarea>
			<text class="report-content-count">{{reportContent.length}}/500</text>
		</view>
		<view class="card">
			<text class="card-title">上传截图(必填)</text>
			<view class="images-box">
				<view class="image-box" @click="SelectImages"></view>
				<view class="image-box" v-for="e,i in images" :key="i">
					<image :src="e" mode="aspectFill"></image>
					<uni-icons @click="DeleteImage(i)" type="close" color="#fff" class="delete-image"></uni-icons>
				</view>
			</view>
		</view>
		<view class="card">
			<text class="card-title">联系方式(必填)</text>
			<uni-easyinput v-model="contact" placeholder="手机号码或QQ号" style="font-size: 26rpx;"
				placeholder-style="font-size: 26rpx;"></uni-easyinput>
		</view>
		<view @click="Submit" class="confirm-button flex items-center justify-center">提交</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import config from '../../config/index.js'
	import aboutUpload from '../../apis/apiList/indexApi.js'

	const reasons = ref([{
			name: '低俗涩情',
			id: 1
		},
		{
			name: '政治敏感',
			id: 2
		},
		{
			name: '血腥暴力',
			id: 3
		},
		{
			name: '抄袭',
			id: 4
		},
		{
			name: '质量差',
			id: 5
		},
		{
			name: '章节乱码错序',
			id: 6
		},
		{
			name: '其他',
			id: 7,
		}
	])
	const reasonIndex = ref(0)
	const reportContent = ref('')
	const images = ref([])
	const contact = ref('')
	let options = ref({})

	onLoad(_options => {
		options.value = _options
		if (options.value.title) {
			uni.setNavigationBarTitle({
				title: decodeURIComponent(options.value.title)
			})
		}
	})

	/**
	 * @description 选择图片
	 */
	function SelectImages() {
		uni.chooseImage({
			count: 9,
			sizeType: ['original', 'compressed'],
			sourceType: ['album', 'camera'],
			success: res => {
				images.value.push(...res.tempFilePaths)
			}
		})
	}

	/**
	 * @description 删除指定索引的图片
	 * @param {Object} index 图片索引
	 */
	function DeleteImage(index) {
		images.value.splice(index, 1)
	}

	let submitLock = false
	async function Submit() {
		if (submitLock) return
		submitLock = true
		if (!images.value.length) {
			uni.showToast({
				title: '请上传截图',
				icon: 'none'
			})
			return
		}

		if (!contact.value) {
			uni.showToast({
				title: '请填写联系方式',
				icon: 'none'
			})
			return
		}

		let _imgstr = []
		for (let i of images.value) {
			let res = await aboutUpload.upLoadImage({
				filePath: i,
				name: 'file'
			})
			_imgstr.push(res.data.url)
		}

		let param = new FormData()
		param.append('member.id', options.value.userId)
		param.append('tps', options.value.type || 0)
		options.value.sts && param.append('sts', options.value.sts)
		options.value.rid && param.append('rid', options.value.rid)
		param.append('imgstr', _imgstr.join(','))
		if (options.value.type) {
			param.append('content', `问题反馈内容:${reportContent.value},联系方式:${contact.value}`)
		} else {
			param.append('content',
				`举报原因:${reasons.value[reasonIndex.value].name},举报内容:${reportContent.value},联系方式:${contact.value}`)
		}

		uni.request({
			url: config.baseUrl + '/app/memberAddReport?' + param.get(),
			method: 'POST',
		}).then(res => {
			submitLock = false
			let {
				data
			} = res
			let {
				msg,
				code
			} = data
			msg && uni.showToast({
				title: msg,
				icon: 'none'
			})
			if (code == 200) {
				setTimeout(() => {
					uni.navigateBack()
				}, 1200)
			}
		}).catch(err => {
			submitLock = false
			uni.showToast({
				title: '提交失败',
				icon: 'none'
			})
		})
	}

	class FormData {
		constructor() {
			this.data = []
		}

		append(key, value) {
			this.data.push(`${key}=${value}`)
		}

		get() {
			return this.data.join('&')
		}
	}
</script>

<style>
	page {
		background-image: none;
	}

	.content {
		padding: 20rpx 20rpx 60rpx;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.card {
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.card-title {
		font-size: 28rpx;
		font-weight: bold;
	}

	.reason-box {
		display: flex;
		gap: 20rpx;
		flex-wrap: wrap;
	}

	.reason {
		background: #f3f3f3;
		border-radius: 10rpx;
		padding: 20rpx;
		width: calc((100% - 20rpx * 2) / 3);
		text-align: center;
		font-size: 26rpx;
		border: 1px solid #e9ebed;
		box-sizing: border-box;
		white-space: nowrap;
	}

	.reason-active {
		background: #e9f7ff;
		border-color: #97d9ff;
	}

	.report-content {
		border-radius: 10rpx;
		background: #f2f7fa;
		font-size: 26rpx;
		width: calc(100vw - 20rpx * 6);
		min-height: 150rpx;
		padding: 20rpx 20rpx 50rpx;
	}

	.report-content-count {
		position: absolute;
		bottom: 30rpx;
		right: 34rpx;
		font-size: 24rpx;
		color: #bcbfbf;
	}

	.images-box {
		display: flex;
		gap: 20rpx;
		flex-wrap: wrap;
	}

	.image-box {
		width: 130rpx;
		height: 130rpx;
		background: #5799db;
		border-radius: 14rpx;
		overflow: hidden;
		position: relative;
	}

	.image-box image {
		width: 100%;
		height: 100%;
	}

	.image-box:nth-child(1) {
		background: #f5f7fa;
	}

	.image-box:nth-child(1)::before {
		content: '';
		width: 2px;
		height: 60%;
		background: #b2c0d0;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.image-box:nth-child(1)::after {
		content: '';
		width: 60%;
		height: 2px;
		background: #b2c0d0;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.delete-image {
		position: absolute;
		top: 6rpx;
		right: 6rpx;
		background: rgba(0, 0, 0, .5);
		padding: 2rpx;
		border-radius: 50%;
	}

	.confirm-button {
		font-size: 30rpx;
		font-weight: bold;
		color: #fff;
		background: #319eff;
		height: 80rpx;
		border-radius: 40rpx;
	}
</style>